---
title: Componentes de otros frameworks
description: 'Aprenda a usar React, Svelte, etc.'
i18nReady: true
---
import IntegrationsNav from '~/components/IntegrationsNav.astro'
import ReadMore from '~/components/ReadMore.astro'

Crea tu página web en Astro sin sacrificar tus componentes de framework favoritos. Crea [islas](/es/concepts/islands/) con el framework UI de tu elección.

## Integraciones oficiales de frameworks UI

Astro admite una variedad de frameworks populares, incluidos [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/), [SolidJS](https://www.solidjs.com/), [AlpineJS](https://alpinejs.dev/) y [Lit](https://lit.dev/) con integraciones oficiales.

Encuentra aún más [integraciones de frameworks mantenidas por la comunidad](https://astro.build/integrations/?search=&categories%5B%5D=frameworks) (por ejemplo, Angular, Qwik, Elm) en nuestro directorio de integraciones.

<IntegrationsNav category="renderer" />

## Instalando integraciones

Una o varias de estas integraciones de Astro se pueden instalar y configurar en tu proyecto.

Consulta la [Guía de integraciones](/es/guides/integrations-guide/) para obtener más detalles sobre la instalación y configuración de las integraciones de Astro.

:::tip
¿Quieres ver un ejemplo para el framework de tu elección? Visita [astro.new](https://astro.new/latest/frameworks) y selecciona una de las plantillas de framework.
:::

## Usando componente de framework

¡Usa los componentes de tu framework JavaScript en tus páginas de Astro, diseños y componentes al igual que los componentes de Astro! Todos sus componentes pueden vivir juntos en `/src/components`, o pueden organizarse de la manera que desee.

Para usar un componente de framework, importalo desde su ruta relativa en el script de tu componente Astro. Luego, usa el componente junto con otros componentes, elementos HTML y expresiones JSX-like en la plantilla del componente.

```astro title="src/pages/static-components.astro" ins={2,7}
---
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<html>
  <body>
    <h1>¡Usa componentes de React directamente en Astro!</h1>
    <MyReactComponent />
  </body>
</html>
```

Por defecto, tus componentes de framework solo se renderizarán en el servidor, como HTML estático. Esto es útil para crear componentes de maquetado que no son interactivos y evitar enviar código JavaScript innecesario al cliente.

## Hidratando componentes interactivos

Un componente de framework puede hacerse interactivo (hidratado) usando una de las [directivas `client:*`](/es/reference/directives-reference/#directivas-del-cliente). Estos son atributos del componente que derminan cuando tu componente de JavaScript debería ser enviado al navegador.

Con todas las directivas de cliente excepto `client:only`, tu componente se renderizará primero en el servidor para generar el HTML estático. El código JavaScript se mandará al navegador de acuerdo con la directiva que hayas escogido. De esta forma el componente se hidratará y se volverá interactivo.

```astro title="src/pages/interactive-components.astro" /client:\S+/
---
// Ejemplo: hidratando los componentes de framework en el navegador.
import InteractiveButton from '../components/InteractiveButton.jsx';
import InteractiveCounter from '../components/InteractiveCounter.jsx';
import InteractiveModal from '../components/InteractiveModal.svelte';
---
<!-- Este componente de JavaScript comenzará a importarse cuando se cargue la página-->
<InteractiveButton client:load />

<!-- El JavaScript de este componente no se enviará al cliente hasta que
el usuario se desplace hacia abajo y el componente sea visible en la página -->
<InteractiveCounter client:visible />

<!-- Este componente no se renderizará en el servidor, pero se renderizará en el 
cliente cuando la página cargue -->
<InteractiveModal client:only="svelte" />
```

:::caution
El framework de JavaScript (React, Svelte, etc.) necesario para renderizar el componente será enviado al navegador junto con el código JavaScript del componente. Si dos o más componentes en una página usan el mismo framework, el framework solo se mandará una vez.
:::

:::note[Accesibilidad]
La mayoría de los patrones de accesibilidad específicos de cada framework deberían funcionar cuando estos componentes se usan en Astro. ¡Asegúrate de elegir una directiva de cliente que asegure que cualquier JavaScript relacionado con la accesibilidad se cargue y ejecute correctamente en el momento adecuado!
:::

### Directivas de hidratación disponibles

Hay varias directivas de hidratación disponibles para los componentes de framework: `client:load`, `client:idle`, `client:visible`, `client:media={QUERY}` y `client:only={FRAMEWORK}`.

<ReadMore>Consulta nuestra página de [referencia de directivas](/es/reference/directives-reference/#directivas-del-cliente) para obtener una descripción completa de las directivas de hidratación y sus usos.</ReadMore>

## Mezclando frameworks

Puedes importar y renderizar componentes usando múltiples frameworks en el mismo componente de Astro.

```astro title="src/pages/mixing-frameworks.astro"
---
// Ejemplo: Mezclando múltiples componentes del framework en la misma página.
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
  <MySvelteComponent />
  <MyReactComponent />
  <MyVueComponent />
</div>
```

:::caution
Solo los componentes de **Astro** (`.astro`) pueden contener componentes de múltiples frameworks.
:::

## Pasando props al componente de framework

Puedes pasar props desde componentes de Astro a tus componentes de framework:

```astro title="src/pages/frameworks-props.astro"
---
import TodoList from '../componentes/TodoList.jsx';
import Counter from '../components/Counter.svelte';
---
<div>
  <TodoList initialTodos={["aprender Astro", "revisar PRs"]} />
  <Counter startingCount={1} />
</div>
```

:::caution[Pasando funciones como props]
Puedes pasar una función como prop a un componente de framework, pero este solo funcionará al renderizar el componente en el servidor. Si intentas usar la función en un componente hidratado (por ejemplo, como un evento), se producirá un error.

Esto es porque las funciones no pueden ser _serializadas_ (transferidas desde el servidor al cliente) por Astro.


## Pasando children a componentes de framework

Dentro de un componente de Astro, **puedes** pasar elementos children a los componentes del framework. Cada framework tiene sus propios patrones sobre cómo hacer referencia a estos elementos children: React, Preact y Solid usan una prop especial llamada `children`, mientras que Svelte y Vue usan el elemento `<slot />`.

```astro title="src/pages/component-children.astro" {5}
---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
---
<MyReactSidebar>
  <p>Aquí hay una barra lateral con texto y un botón.</p>
</MyReactSidebar>
```

Además, puedes usar [slots con nombre](/es/basics/astro-components/#slots-con-nombre) para agrupar hijos específicos.

Para React, Preact y Solid, estos slots se convertirán en una prop de nivel superior. Los slots con nombres que usen `kebab-case` se convertirán a `camelCase`.

```astro title="src/pages/named-slots.astro" /slot="(.*)"/
---
import MySidebar from '../components/MySidebar.jsx';
---
<MySidebar>
  <h2 slot="title">Menu</h2>
  <p>Aquí hay una barra lateral con texto y un botón.</p>
  <ul slot="social-links">
    <li><a href="https://twitter.com/astrodotbuild">Twitter</a></li>
    <li><a href="https://github.com/withastro">GitHub</a></li>
  </ul>
</MySidebar>
```

```jsx /{props.(title|socialLinks)}/
// src/components/MySidebar.jsx
export default function MySidebar(props) {
  return (
    <aside>
      <header>{props.title}</header>
      <main>{props.children}</main>
      <footer>{props.socialLinks}</footer>
    </aside>
  )
}
```

Para Svelte y Vue, puedes hacer referencia a estos slots mediante un elemento `<slot>` con el atributo `name`. Se conservarán los nombres de los slots que usen `kebab-case`.

```jsx /slot name="(.*)"/
// src/components/MySidebar.svelte
<aside>
  <header><slot name="title" /></header>
  <main><slot /></main>
  <footer><slot name="social-links" /></footer>
</aside>
```

## Anidando componentes de framework

Dentro de un archivo Astro, los children de los componentes de framework también pueden ser componentes hidratados. Esto significa que puedes anidar recursivamente componentes en cualquiera de estos frameworks.

```astro title="src/pages/nested-components.astro" {10-11}
---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
import MyReactButton from '../components/MyReactButton.jsx';
import MySvelteButton from '../components/MySvelteButton.svelte';
---

<MyReactSidebar>
  <p>Aquí hay una barra lateral con texto y un botón.</p>
  <div slot="actions">
    <MyReactButton client:idle />
    <MySvelteButton client:load />
  </div>

</MyReactSidebar>
```

:::caution
Recuerda: los propios archivos de los componentes de framework (por ejemplo, `.jsx`, `.svelte`) no pueden combinar varios frameworks.
:::

Esto te permite crear "aplicaciones" completas usando tu framework de JavaScript preferido y renderizarlas, a través de un componente principal, en una página de Astro.

:::note
Los componentes de Astro siempre se renderizan a HTML estático, incluso cuando incluyen componentes de framework que son hidratados. Esto significa que solo se pueden pasar props que no hacen ninguna renderización a HTML. Pasar "render props" de React a componentes del framework desde un componente de Astro no funcionará, porque los componentes de Astro no pueden proporcionar el renderizado que este patrón requiere. En su lugar, utiliza slots con nombre.
:::

## ¿Puedo usar componentes de Astro dentro de mis componentes de framework?

Cualquier componente de framework se convierte en una "isla" de ese framework. Estos componentes deben escribirse en su totalidad como código válido para ese framework, utilizando solo sus propios imports y paquetes. No puedes importar componentes `.astro` en un componente de framework (por ejemplo, `.jsx` o `.svelte`).

Sin embargo, puedes usar el patrón [Astro `<slot />`](/es/basics/astro-components/#slots) para pasar el contenido estático generado por los componentes de Astro como elementos secundarios a los componentes de framework **dentro de un Componente `.astro`**.

```astro title="src/pages/astro-children.astro" {6}
---
import MyReactComponent from  '../components/MyReactComponent.jsx';
import MyAstroComponent from '../components/MyAstroComponent.astro';
---
<MyReactComponent>
  <MyAstroComponent slot="name" />
</MyReactComponent>
```

## ¿Puedo hidratar los componentes de Astro?

Si intentas hidratar un componente Astro con un modificador `client:`, obtendrás un error.

Los [componentes de Astro](/es/basics/astro-components/) son componentes de maquetado únicamente en HTML sin ninguna ejecución del lado del cliente. Pero puedes usar una etiqueta `<script>` en el maquetado del componente de Astro para enviar JavaScript al navegador que se ejecutará en un ámbito global.

<ReadMore>Obtenga más información sobre [`<scripts>` del lado del cliente en los componentes de Astro](/es/guides/client-side-scripts/)</ReadMore>

[mdn-io]: https://developer.mozilla.org/es/docs/Web/API/Intersection_Observer_API
[mdn-ric]: https://developer.mozilla.org/es/docs/Web/API/Window/requestIdleCallback
[mdn-mm]: https://developer.mozilla.org/es/docs/Web/API/Window/matchMedia
